<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
  <meta charset="utf-8">
  <base th:href="@{/}">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>科室列表</title>
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/css/style1.css" rel="stylesheet">
  <link href="/css/style.css" rel="stylesheet">

</head>
<body>
<div th:insert="~{admin/header1}"></div>
<main id="main">
  <section class="breadcrumbs">
    <div class="container">
      <div class="d-flex justify-content-between align-items-center">
        <ol>
          <li><a href="#">首页</a></li>
          <li><a href="#">科室列表</a></li>
        </ol>
      </div>
    </div>
  </section>
  <section class="inner-page">
    <div class="container" id="contentArea">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">全部科室</h3>
        </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table text-center">
            <thead>
            <tr>
              <th>科室号</th>
              <th>科室名称</th>
              <th>科室详情</th>
              <th>科室类型</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="department : ${departments}">
              <td th:text="${department.kNo}"></td>
              <td th:text="${department.dName}"></td>
              <td th:text="${#strings.abbreviate(department.detail, 20)}"></td>
              <td th:text="${department.type}"></td>
              <td>
                <form th:action="@{/departments/{id}/edit(id=${department.id})}" method="post" style="display:inline">
                  <button type="submit" class=" btn btn1 btn-sm">编辑</button>
                </form>
                <form th:action="@{/departments/{id}/delete(id=${department.id})}" method="get" style="display:inline">
                  <button type="submit" class=" btn btn2 btn-sm delete-confirm">删除</button>
                </form>

              </td>
            </tr>
            <tr>
              <td colspan="5" style="border: none;">
                <ul class="pagination justify-content-center">
                  <li class="page-item" th:if="${currentPage}!= 1">
                    <a class="page-link" th:href="@{/departments(currentPage=${currentPage - 1})}">上一页</a>
                  </li>
                  <li class="page-item disabled">
                    <a class="page-link" href="#">第<span th:text="${currentPage}"></span>页</a>
                  </li>
                  <li class="page-item disabled">
                    <a class="page-link" href="#">共<span th:text="${totalPage}"></span>页</a>
                  </li>
                  <li class="page-item" th:if="${currentPage}!= ${totalPage}">
                    <a class="page-link" th:href="@{/departments(currentPage=${currentPage + 1})}">下一页</a>
                  </li>
                </ul>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    </div>
  </section>
</main>
<script>
  // ... 之前的脚本内容 ...
  document.addEventListener('DOMContentLoaded', function () {
    // ... 之前的脚本内容 ...
    // 确认删除的函数
    function confirmDelete(event) {
      event.preventDefault(); // 阻止表单默认提交行为
      if (confirm('确定要删除这条排班信息吗？')) {
        // 如果用户点击确定，则提交表单
        event.target.closest('form').submit();
      }
    }

    // 为所有删除按钮添加事件监听器
    var deleteButtons = document.querySelectorAll('.delete-confirm');
    deleteButtons.forEach(function(button) {
      button.addEventListener('click', confirmDelete);
    });
  });
</script>
<script src="js/main.js"></script>
</body>
</html>
